<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Pagination</h2>
    <div class="demo-1 live-demo">
        <h3>默认模式</h3>
        <button style="margin: 10px 0" (click)="changeCurrentPage(6)">第6页</button><br>
        <jigsaw-pagination [data]="pageable"
                           [pageSizeOptions]="[5, 10, 20]"
                           [searchable]="true"
                           [showQuickJumper]="true"
                           (currentChange)="getCurrentPage($event)"
                           (pageSizeChange)="getPageSize($event)"
                           widh="710px">
        </jigsaw-pagination>
        <p class="message">当前第{{pageable.pagingInfo.currentPage}}页</p>
    </div>

    <div class="demo-2 live-demo">
        <h3>简约模式</h3>
        <jigsaw-pagination [data]="pageableForSimple"
                           (currentChange)="getCurrentPage($event)"
                           mode="simple">
        </jigsaw-pagination>
        <p class="message">当前第{{pageableForSimple.pagingInfo.currentPage}}页</p>
    </div>

</div>
